<template>
    <view class="content">
        <view class="record-info">
            <view class="img-box">
                <image class="image" :src="drawInfo.pic.split(',')[0]"></image>
            </view>
            <view class="right">
                <view class="draw-name">{{ drawInfo.name }}x{{ drawInfo.num }}</view>
				<view class="draw-status" :class="[{ disabled : drawInfo.status === 1 }]">{{ drawInfo.status === 0 ? '待兑奖' : '已兑奖' }}</view>
            </view>
        </view>
		<view class="addr-form" v-if="drawInfo.status !== 1">
			<view class="label">联系人：</view>
			<input class="addr-input" :value="form.addrName" placeholder="请输入联系人" placeholder-class="placeholder-class" @input="onAddrNameInput"/>
			<view class="label">手机号码：</view>
			<input class="addr-input" :value="form.addrPhone" type="number" maxlength="11" placeholder="请输入手机号码" placeholder-class="placeholder-class" @input="onAddrPhoneInput"/>
			<view class="label">详细地址：</view>
			<textarea class="addr-area" :value="form.address" placeholder="请输入详细地址" placeholder-class="placeholder-class" @input="onAddressInput"/>
		</view>
		<view class="addr-info" v-if="drawInfo.status === 1">
			<view class="text">联系人：{{ drawInfo.addrName }}</view>
			<view class="text">手机号码：{{ drawInfo.addrPhone }}</view>
			<view class="text">详细地址：{{ drawInfo.address }}</view>
			<view class="text" v-if="drawInfo.remark">客服留言：</view>
			<view class="remark" v-if="drawInfo.remark">{{ drawInfo.remark }}</view>
		</view>
		<view class="service">
			<text class="text">客服微信：{{ hdyxRiskSetting.wechat }}</text>
			<view class="copy" @tap="onCopy()"><text class="iconfont icon-fuzhi"></text>复制</view>
		</view>
		
		<view class="submit" @tap="submit()" v-if="drawInfo.status === 0">提交</view>
    </view>
</template>

<script>
	import { mapGetters } from 'vuex';
    export default {
        name: "reward",
        data() {
            return {
                options: {},
                drawInfo: {},
				form: {
					addrName: '',
					addrPhone: '',
					address: ''
				},
				btnLock: false
            }
        },
        onLoad(options) {
            this.options = options;

            this.getDrawInfo();
        },
		computed: {
			...mapGetters(['hdyxRiskSetting'])
		},
        methods: {
            getDrawInfo() {
                uni.showLoading({
                    title: '加载中...',
                });
                this.$service.activity.lotteryActivity.info({
                    id: this.options.id
                }).then(res => {
                    this.drawInfo = res;
                    uni.hideLoading();
                });
            },
			onAddrNameInput(e) {
				this.form.addrName = e.detail.value;
			},
			onAddrPhoneInput(e) {
				this.form.addrPhone = e.detail.value;
			},
			onAddressInput(e) {
				this.form.address = e.detail.value;
			},
			submit() {
				let { addrName, addrPhone, address } = this.form;
				if (!addrName) {
					uni.showToast({
						title: '联系人不能为空',
						icon: 'none'
					});
					return false;
				}
				if (!/^1[345789]\d{9}$/.test(addrPhone)) {
					uni.showToast({
						title: '请输入有效手机号码',
						icon: 'none'
					});
					return false;
				}
				if (!address) {
					uni.showToast({
						title: '详细地址不能为空',
						icon: 'none'
					});
					return false;
				}
				uni.showLoading({
					title: '加载中...'
				});
				if (!this.btnLock) {
					this.btnLock = true;
					this.$service.activity.lotteryActivityUser.reward({
					    activityId: this.options.id,
						...this.form
					}).then(res => {
						this.getDrawInfo();
						
						this.btnLock = false;
					
						uni.reportAnalytics('click_duijiangtj_cg', {
							click_duijiangtj_cg: 1
						});
					}).catch((err) => {
						uni.showToast({
							title: err.message,
							icon: 'none'
						})
						this.btnLock = false;
					});
				}
			},
			onCopy() {
				uni.setClipboardData({
				    data: this.hdyxRiskSetting.wechat,
				    success: function () {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						});
				    }
				});
				uni.reportAnalytics('click_weixinfz', {
					click_weixinfz: 1
				});
			}
        }
    }
</script>

<style lang="scss" scoped>
.content {
    padding: 20rpx;
	.record-info {
		padding: 20rpx;
		background: #fff;
		border-radius: 8rpx;
		@include flexBox(space-between, center);
		.img-box {
		    width: 120rpx;
		    height: 120rpx;
		    .image {
		        width: 100%;
		        height: 100%;
		    }
		}
		.right {
		    flex: 1;
		    overflow: auto;
		    margin-left: 32rpx;
			@include flexBox(flex-end, flex-end, column);
		    .draw-name {
		        color: #333;
		        font-size: 28rpx;
		    }
		    .draw-type {
		        color: #7A7A7A;
		        font-size: 24rpx;
		        margin-top: 6rpx;
		    }
			.draw-status {
				color: #4BA1FE;
				font-size: 28rpx;
				margin-top: 10rpx;
				&.disabled {
					color: #7A7A7A;
				}
			}
		}
	}
	.addr-form {
		.label {
			color: #333333;
			font-size: 28rpx;
			margin-bottom: 16rpx;
			margin-top: 20rpx;
		}
		.addr-input {
			width: 100%;
			background: #fff;
			padding: 12rpx 24rpx;
			font-size: 28rpx;
			border-radius: 8rpx;
			line-height: 60rpx;
			height: 60rpx;
			box-sizing: border-box;
		}
		.addr-area {
			width: 100%;
			background: #fff;
			padding: 12rpx 24rpx;
			font-size: 28rpx;
			border-radius: 8rpx;
			height: 250rpx;
			box-sizing: border-box;
		}
		.placeholder-class {
			color: #B7B7B7;
		}
	}
	.addr-info {
		width: 708rpx;
		background: #fff;
		border-radius: 8rpx;
		margin: 20rpx auto;
		padding: 24rpx;
		font-size: 28rpx;
		box-sizing: border-box;
		.text {
			color: #333333;
			margin-bottom: 10rpx;
		}
		.remark {
			margin-top: 20rpx;
			background: #E8F2FF;
			color: #1677FA;
			padding: 18rpx;
			box-sizing: border-box;
			border-radius: 8rpx;
		}
	}
	.service {
		font-size: 28rpx;
		color: #333;
		margin-top: 10rpx;
		@include flexBox(space-between, center);
		.copy {
			color: #4BA1FE;
			@include flexBox(center, center);
			.iconfont {
				margin-right: 6rpx;
			}
		}
	}
	.submit {
		width: 400rpx;
		line-height: 80rpx;
		background: #4BA1FE;
		font-size: 28rpx;
		color: #fff;
		text-align: center;
		border-radius: 8rpx;
		margin: 100rpx auto;
	}
}
</style>